<template>
  <div class="storeManage">
    <div class="head">
      <el-row :gutter="20">
        <el-col :span="6">
          <p>承运商编号</p>
          <el-input placeholder="请输入" v-model="form.like_code"></el-input>
        </el-col>
        <el-col :span="6">
          <p>承运商名称</p>
          <el-input placeholder="请输入" v-model="form.like_name"></el-input>
        </el-col>
        <el-col :span="6">
          <p>联系人</p>
           <el-input placeholder="请输入" v-model="form.like_personName"></el-input>
        </el-col>
        <el-col :span="6">
          <div class="btn">
            <el-button type="warning" @click="searchFn">搜索</el-button>
            <el-button @click="cancle">重置</el-button>
          </div>
        </el-col>
      </el-row>
    </div>
    <div class="content">
      <el-table :data="tableList" border style="width: 100%"  v-loading="loading">
        <el-table-column type="index" label="序号" width="150">
        </el-table-column>
        <el-table-column prop="code" label="承运商编号" width="150">
        </el-table-column>
        <el-table-column prop="name" label="承运商名称" width="200"> </el-table-column>
        <el-table-column prop="personName" label="联系人" width="200"> </el-table-column>
        <el-table-column prop="phone" label="联系人电话" width="250"> </el-table-column>
        <el-table-column prop="email" label="联系邮箱" width="250"> </el-table-column>
        <el-table-column prop="location" label="省/市/区" width="250"> </el-table-column>
        <el-table-column prop="address" label="详细地址" width="250"> </el-table-column>
        <el-table-column prop="updateTime" label="更新时间" width="200"> </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
import { getList } from '@/api/business/commonCarrierManage'
export default {
  name: 'storeManage-page',
  data () {
    return {
      form: {
        id: '',
        like_code: '',
        like_name: '',
        current: 1,
        size: 10,
        like_personName: '',
        descs: 'createTime'
      },
      tableData: {},
      tableList: [],
      loading: false
    }
  },

  methods: {
    // 搜索按钮
    async searchFn () {
      const res = await getList(this.form)
      this.tableList = res.data.records
      this.tableData = res.data
    },

    pageChangeFn (pageNum) {
      console.log(pageNum)
      this.form.current = pageNum
      this.getList()
    },

    pageSizeChangeFn (pageSize) {
      console.log(pageSize)
      this.form.size = pageSize
      this.getList()
    },
    // 重置按钮
    cancle () {
      this.form = {
        code: '',
        name: '',
        ownerName: ''
      }
      this.getList()
    },
    async getList () {
      const res = await getList(this.form)
      this.tableData = res.data
      this.tableList = res.data.records
    }
  },
  created () {
    this.getList()
  }
}
</script>

<style lang="scss" scoped>
.storeManage {
  .head {
    height: 127px;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 0 6px 0 rgb(144 142 142 / 17%);
    padding: 30px;
    margin-bottom: 20px;
    p {
      margin-bottom: 10px;
      height: 18px;
      font-size: 12px;
      color: #887e7e;
      font-family: PingFangSC, PingFangSC-Medium;
      font-weight: 500;
    }
    .el-select {
      ::v-deep .el-input__inner {
        height: 40px;
        line-height: 40px;
        border: 1px solid #f8f5f5;
        background: #f8f5f5;
        border-radius: 6px;
      }
    }
    .el-input {
      ::v-deep .el-input__inner {
        height: 40px;
        line-height: 40px;
        border: 1px solid #f8f5f5;
        background: #f8f5f5;
        border-radius: 6px;
      }
    }

    .btn {
      float: right;
      margin-top: 25px;
      .el-button {
        border-radius: 20px;
      }
    }
  }
  .content {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 0 6px 0 rgb(144 142 142 / 17%);
    .addBtn {
      margin-left: 30px;
      margin-top: 20px;
      margin-bottom: 20px;
      background: #00be76;
      color: #fff;
      height: 40px;
      border-radius: 20px;
      border: 0;
      font-size: 14px;
      font-family: PingFangSC, PingFangSC-Medium;
      font-weight: 500;
      text-align: center;
      line-height: 40px;
      padding-left: 26px;
      padding-right: 26px;
      cursor: pointer;
      outline: 0;
    }
    .el-table {
      ::v-deep .el-table__header-wrapper{
        th {
         background: rgb(249, 246, 238);
         text-align: center;
        }
      }
      ::v-deep .el-table__body-wrapper {
        td {
           text-align: center;
        }
      }
    }
  }
}
</style>
